import React, { Component } from "react";
import IndexBanner from "./IndexBanner.js";
import { Link } from "react-router-dom";
import { RACE_AREA_LINK, VIDEO_LINK } from "../actions/types.js";
import axios from "axios";

class Index extends Component {
  state = { indexVideos: [] };
  componentDidMount() {
    axios.get("/Tgh/data/index_video_url").then(res => {
      // console.log(res.data);
      this.setState({ indexVideos: res.data });
    });
  }
  render() {
    return (
      <div>
        <div className="top-title">首页</div>
        <IndexBanner />
        {this.renderIndexSection()}
      </div>
    );
  }
  renderIndexSection() {
    return Object.keys(this.state.indexVideos).map(key => {
      return(
        <section className="race-area" key={key}>
          <div className="race-area-top">
            <div className="title-left">{key}</div>
            <Link to={`${RACE_AREA_LINK}/${key}`} className="title-right">
              查看全部
              <i className="fa fa-angle-right" style={{ marginLeft: 10 }} />
            </Link>
          </div>
          <div className="race-area-content">
            {this.renderContent(this.state.indexVideos[key])}
          </div>
        </section>
      )
    });
  }
  renderContent(indexVideos){
    return indexVideos.map(indexVideo=>{
      const { video_name, id} = indexVideo;
      let videoImageUrl = indexVideo.video_image;
      if(videoImageUrl.indexOf("http") === -1){
        videoImageUrl = `/images/${videoImageUrl}`
      }
      return(
        <Link to={`${VIDEO_LINK}/${id}`} key={id} className="content-contain">
          <div
            className="content-img"
            style={{ backgroundImage: `url(${videoImageUrl})` }}
          />
          <div>{video_name}</div>
        </Link>
      )
    })
  }
}
export default Index;

